<template>
  <div class="page-module-container">
    <div class="box-title">可选模块</div>
    <div class="box-scrollbar">
      <el-scrollbar style="height: 100%" class="hid-scrollbar-x">
        <div class="box-content">
          <el-collapse v-model="activeTypeNames">
            <el-collapse-item v-for="item in moduleOptions" :key="item.group" :title="item.group" :name="item.group">
              <ul>
                <draggable
                  :list="item.components"
                  :options="{
                    group: { name: 'modules', put: false, pull: 'clone' },
                    sort: false,
                    filter: '.undrag',
                  }"
                  class="module-list"
                  animation="300"
                  @remove="onRemove"
                  @add="add"
                >
                  <li
                    v-for="subItem in item.components"
                    :key="subItem.key"
                    :class="
                      (isDIANPU() == 1 && subItem.bizType != 'DIANPU') ||
                        (isDIANPU() == 1 && selectedKeys.includes(subItem.key)) ||
                        (isDIANPU() == 2 && subItem.bizType == 'DIANPU') ||
                        (subItem.temp.length !== 0 && !subItem.temp.includes(activePageInfo.style)) ||
                        subItem.disable
                        ? 'isdisable undrag'
                        : ''
                    "

                    class="draggable-cell-prev"
                  >
                    <img
                      :src="require('@/assets/icon/app/i-module-' +
                        subItem.key +
                        '.png')
                      "
                      alt
                      srcset
                      class="i-module"
                    >
                    <span>{{ subItem.label }}</span>
                  </li>
                </draggable>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import wxaBuildConfig from '@/views/wxaBuildModule/config'
import bizParams from './bizParams'
import { mapGetters } from 'vuex'

export default {
  components: {
    draggable
  },
  props: {
    activePageInfo: {
      type: Object
    }
  },
  data() {
    return {
      // 配置
      // 状态
      // 数据
      classifyCode: 'DEFAULT',
      activeTypeNames: [],
      moduleOptions: [],
      singleList: [],
      flatModuleOptions: []
    }
  },
  watch: {
    'activePageForm': {
      handler(activePageForm) {
        this.singleChange(activePageForm)
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters(['activePageForm', 'selectedTypes', 'selectedKeys']),
    isDIANPU() {
      return (key) => {
        if (!this.selectedTypes) {
          return
        }
        let typeStatus = 0
        if (this.selectedTypes.length && this.selectedTypes.includes('DIANPU')) {
          typeStatus = 1
        } else if (this.selectedTypes.length && !this.selectedTypes.includes('DIANPU')) {
          typeStatus = 2
        } else if (!this.selectedTypes.length) {
          typeStatus = 0
        }

        return typeStatus
      }
    }
  },
  created() {
  },
  mounted() {
    this.fetchData()
    this.flatModuleOptions = []
    this.moduleOptions.forEach(item => {
      this.flatModuleOptions.push(...item.components)
    })
    this.flatModuleOptions = this.flatModuleOptions.filter(item => item.single)
    this.singleList = this.flatModuleOptions.map(item => item.key)
    this.singleChange(this.activePageForm)
  },
  methods: {
    singleChange(activePageForm) {
      this.flatModuleOptions.forEach(item => item.disable = false)
      activePageForm.modules.forEach(item => {
        if (this.singleList.includes(item.type)) {
          const module = this.flatModuleOptions[this.singleList.indexOf(item.type)]
          module.disable = true
        }
      })
    },
    /**
     * 数据组
     */
    // 获取所有的tyoeName
    fetchData() {
      // 克隆
      const module = JSON.parse(JSON.stringify(wxaBuildConfig[this.classifyCode].module))
      // 处理掉不必要数据
      module.forEach(item => item.components = item.components.filter(subItem => subItem.temp.includes(this.activePageInfo.style)))
      // 处理掉不必要数据并赋值
      this.moduleOptions = module.filter(item => item.components.length)
      this.activeTypeNames = []
      this.moduleOptions.forEach((v) => {
        this.activeTypeNames.push(v.group)
      })
    },

    /**
     * 按钮组
     */

    /**
     * 状态组
     */
    add() {
      console.log('add')
    },
    // 拖动模块
    onRemove(e) {
      this.activePageForm.activeModuleIndex = null
      const config = {
        mofangdaohang: {
          type: 'images-text-gird',
          row: 2
        }
      }
      const key = this.activePageForm.modules[e.newIndex].key
      const params = {
        bg: '',
        biz: {
          params: '',
          type: this.activePageForm.modules[e.newIndex].bizType
        },
        color: '',
        content: '',
        dump: {
          appId: '',
          feature: '',
          featureParams: '',
          insidePage: '',
          insideParams: {
            config: config[key] || ''
          },
          path: '',
          type: '',
          url: ''
        },
        modules: [],
        pic: '',
        style: '',
        subTitle: '',
        subType: '',
        title: '',
        height: 350,
        type: this.activePageForm.modules[e.newIndex].key
      }
      if (this.activePageForm.modules[e.newIndex].storeMode) {
        params.biz.params = { storeMode: this.activePageForm.modules[e.newIndex].storeMode }
      }
      if (bizParams[this.activePageForm.modules[e.newIndex].key]) {
        params.biz.params = bizParams[this.activePageForm.modules[e.newIndex].key]
      }
      this.activePageForm.modules[e.newIndex] = params

      const keys = []
      this.activePageForm.modules.forEach(item => { keys.push(item.type) })
      this.$store.dispatch('setSelectedKeys', keys)
      this.$nextTick(() => {
        this.activePageForm.activeModuleIndex = e.newIndex
        const selectedTypes = []
        this.activePageForm.modules.forEach(item => {
          selectedTypes.push(item.biz.type)
        })
        this.$store.dispatch('setSelectedTypes', selectedTypes)
      })
      console.log('拖動=====', this.activePageForm.modules)
    }
    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.page-module-container {
  overflow: hidden;
  height: 100%;
  padding: 20px 0 20px;
  background-color: #fff;
  border-radius: 20px;

  .box-title {
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    text-align: center;
    color: #303133;
    font-weight: bold;
  }

  .box-scrollbar {
    height: calc(100% - 40px);
  }

  .box-content {
    padding: 0 20px;
  }
}

/* 模块列表 */
.module-list {
  display: flex;
  flex-wrap: wrap;

  li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 33.33%;
    height: 80px;
    font-size: 14px;
    transition: all 1s;
    cursor: move;

    .i-module {
      width: 36px;
      height: 36px;
      margin-bottom: 10px;
    }
  }

  .isdisable {
    opacity: 0.2;
    cursor: not-allowed;
  }

  .draggable-cell-prev.sortable-chosen {
    background: #ecf5ff;
  }
}

/* 格式化 */
::v-deep .el-collapse-item__wrap,
.el-collapse-item__header,
.el-collapse {
  border: none;
}
</style>
